<script setup lang="ts">
import { ref, reactive } from "vue"

const font = reactive({
  color: "rgba(0, 0, 0, .15)"
})

const captureRef = ref(null)
const dialogVisible = ref(false)
const items = ref({
  serial_number: ""
})
const showClick = (el: {
  discountLen: number
  buysLen: number
  buysList: lists[]
  discountList: lists[]
  special: boolean
  specialNum: number
  total: {
    acceptor: string
    billAmount: string
    points: string
    open: string
    rebate: string
    interestDeduction: string
  }
  discountTotal: {
    serialNumber: string
    matter: string
    acceptor: string
    billAmount: string
    points: string
    open: string
    rebate: string
    interestDeduction: string
  }
  items: {
    serial_number: string
  }
}) => {
  discountLen.value = el.discountLen
  buysLen.value = el.buysLen
  buysList.value = el.buysList
  discountList.value = el.discountList
  special.value = el.special
  specialNum.value = el.specialNum
  total.acceptor = el.total.acceptor
  total.billAmount = el.total.billAmount
  total.points = el.total.points
  total.open = el.total.open
  total.rebate = el.total.rebate
  total.interestDeduction = el.total.interestDeduction
  discountTotal.serialNumber = el.discountTotal.serialNumber
  discountTotal.matter = el.discountTotal.matter
  discountTotal.acceptor = el.discountTotal.acceptor
  discountTotal.billAmount = el.discountTotal.billAmount
  discountTotal.points = el.discountTotal.points
  discountTotal.open = el.discountTotal.open
  discountTotal.rebate = el.discountTotal.rebate
  discountTotal.interestDeduction = el.discountTotal.interestDeduction
  items.value = el.items
  console.log(discountTotal)
  dialogVisible.value = true
}

defineExpose({ showClick })

const handleClose = () => {
  dialogVisible.value = false
  emit("DialogClose", true)
}
const emit = defineEmits(["DialogClose"])

interface lists {
  serialNumber: string
  matter: string
  acceptor: string
  billAmount: string
  points: string
  rebate: string
  interestDeduction: string
  open: string
}
const discountLen = ref(-1)
const buysLen = ref(-1)
const buysList = ref<lists[]>([])
const discountList = ref<lists[]>([])
const special = ref<boolean>(false)
const specialNum = ref<number>(0)
const total = reactive({
  acceptor: "",
  billAmount: "",
  points: "",
  open: "",
  rebate: "",
  interestDeduction: ""
})
const discountTotal = reactive({
  serialNumber: "",
  matter: "",
  acceptor: "",
  billAmount: "",
  points: "",
  open: "",
  rebate: "",
  interestDeduction: ""
})

const isOpenGreaterThanOne = (open: string | number) => {
  const openValue = typeof open === "string" ? parseFloat(open) : open
  return !isNaN(openValue) && openValue > 1
}
</script>

<template>
  <el-dialog v-model="dialogVisible" title="截图" width="50%" :before-close="handleClose" destroy-on-close draggable>
    <div ref="captureRef">
      <div class="head">
        <div class="heads-left">
          <div class="heads-icons">
            <img src="@/assets/bill/tb.png" alt="" srcset="" />
          </div>
          <div class="company-name">浙江网京</div>
          <div class="company-title">专业承兑服务</div>
        </div>
        <div class="heads-right">NO:{{ items.serial_number }}</div>
      </div>
      <div>
        <el-watermark :font="font" content="浙江网京">
          <table>
            <thead>
              <tr v-if="discountLen > 0">
                <th style="width: 60px">贴现</th>
                <th>承兑人信息</th>
                <th>票面金额(万元)</th>
                <th>点数</th>
                <th>贴息金额(元)</th>
                <th>返点</th>
              </tr>
            </thead>
            <template v-if="discountLen > 0">
              <tr v-for="(item, index) in discountList" :key="index">
                <td>{{ item.serialNumber }}</td>
                <!-- <td>{{ item.matter }}</td> -->
                <td>{{ item.acceptor }}</td>
                <td>
                  {{ item.billAmount }}
                  <span v-if="isOpenGreaterThanOne(item.open)">*{{ item.open }}</span>
                </td>
                <td>{{ item.points }}</td>
                <!-- <td>{{ item.open }}</td> -->
                <td>{{ item.interestDeduction }}</td>
                <td>{{ item.rebate }}</td>
              </tr>
              <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
              </tr>
            </template>

            <template v-if="buysLen > 0">
              <tr>
                <th>买票</th>
                <th>
                  <div v-if="buysLen > 0 && discountLen < 1">承兑人信息</div>
                  <div v-else>&nbsp;</div>
                </th>
                <th>
                  <div v-if="buysLen > 0 && discountLen < 1">票面金额(万元)</div>
                  <div v-else>&nbsp;</div>
                </th>
                <th>
                  <div v-if="buysLen > 0 && discountLen < 1">点数</div>
                  <div v-else>&nbsp;</div>
                </th>
                <th>
                  <div v-if="buysLen > 0 && discountLen < 1">贴息金额(元)</div>
                  <div v-else>&nbsp;</div>
                </th>
                <th>
                  <div v-if="buysLen > 0 && discountLen < 1">返点</div>
                  <div v-else>&nbsp;</div>
                </th>
              </tr>
              <tr v-for="(item, index) in buysList" :key="index">
                <td>{{ item.serialNumber }}</td>
                <!-- <td>{{ item.matter }}</td> -->
                <td>{{ item.acceptor }}</td>
                <td>
                  {{ item.billAmount }}
                  <span v-if="isOpenGreaterThanOne(item.open)">*{{ item.open }}</span>
                </td>
                <td>{{ item.points }}</td>
                <!-- <td>{{ item.open }}</td> -->
                <td>{{ item.interestDeduction }}</td>
                <td>{{ item.rebate }}</td>
              </tr>
              <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
              </tr>
            </template>
            <template v-if="buysLen > 0 || discountLen > 0">
              <tr v-if="buysLen + discountLen > 1" class="total">
                <td>&nbsp;</td>
                <td>{{ total.acceptor }}</td>
                <td>{{ total.billAmount }}</td>
                <td>{{ total.points }}</td>
                <!-- <td>{{ total.open }}</td> -->
                <td>{{ total.interestDeduction }}</td>
                <td>{{ total.rebate }}</td>
              </tr>
            </template>
            <tr v-if="special && discountLen > 0 && buysLen == 0">
              <td colspan="8">
                <div class="special">
                  扣息回款: {{ discountTotal.billAmount }} - {{ discountTotal.interestDeduction }} =
                  {{ specialNum }}
                  元
                </div>
              </td>
            </tr>
          </table>
        </el-watermark>
      </div>
    </div>
  </el-dialog>
</template>

<style lang="scss" scoped>
.head {
  height: 60px;
  width: 100%;
  background: radial-gradient(circle, #fcccbc, #f4ba97);
  display: flex;
  justify-content: space-between;
}
.heads-left {
  display: flex;
}
.heads-left .company-name {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30px;
  font-weight: bold;
  font-family: Inter, "Microsoft YaHei", serif;
}
.heads-left .company-title {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  margin-bottom: 10px;
  margin-left: 10px;
  font-size: 18px;
  font-weight: bold;
  color: #0d84ff;
  font-family: Inter, "Microsoft YaHei", serif;
}
.heads-icons {
  width: 80px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.heads-icons img {
  width: 50px;
}
.heads-right {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  margin-bottom: 10px;
  margin-right: 10px;
  font-size: 16px;
}
table {
  width: 100%;
  border-collapse: collapse;
}
th,
td {
  padding: 8px;
  border: 1px solid #ddd;
  text-align: center;
}
th {
  position: sticky;
  top: 0; /* 标题行固定在顶部 */
  background-color: #f2f2f2;
}
/* Hover effect */
tr:hover {
  background-color: #f5f5f5;
}
.total {
  background-color: #134e88;
  color: white;
}
.special {
  display: flex;
  align-items: center;
  justify-content: center;
  color: red;
  font-size: 20px;
}
</style>
